<script setup>
import {ref, onMounted} from 'vue'

const time = ref(0)
const state = ref(false)
const grid = ref([])
let nums = ref([])
let flag = ref(false)
onMounted(() => {
  setInterval(() => {
    if (state.value)
      time.value++
  }, 1000)
})

function init() {
  for (let i = 0; i < 9; i++) {
    grid.value[i] = []
    for (let j = 0; j < 9; j++) {
      grid.value[i][j] = [0, false]
    }
  }
  for (let i = 0; i < 9; i++)
    for (let j = 0; j < 9; j++) {
      let nb = Math.floor(Math.random() * 100) + 1
      if (nb < 55) {
        nb %= 10
        judgment(i, j, true)
        if (nb !== 0 && nums.value[nb][1])
          for (let k = 1; k < 10; k++)
            if (!nums.value[k][1])
              nb = nums.value[k][0]
        grid.value[i][j] = [nb, true]
      }
    }
  state.value = true
}

function reset() {
  for (let i = 0; i < 9; i++)
    for (let j = 0; j < 9; j++)
      if (grid.value[i][j][1] === false)
        grid.value[i][j][0] = 0
}


function judgment(x, y, s) {
  if (grid.value[x][y][0] === 'x') {
    grid.value[x][y][0] = 0
    return
  }
  for (let i = 0; i < 9; i++)
    for (let j = 0; j < 9; j++)
      if (grid.value[i][j][0] === 'x')
        grid.value[i][j][0] = 0
  nums.value = []
  for (let i = 0; i < 10; i++)
    nums.value.push([i, false])
  for (let i = 0; i < 9; i++) {
    if (i !== y && grid.value[x][i][0] !== 0)
      if (!nums.value[grid.value[x][i][0]][1])
        nums.value[grid.value[x][i][0]][1] = true
    if (i !== x && grid.value[i][y][0] !== 0)
      if (!nums.value[grid.value[i][y][0]][1])
        nums.value[grid.value[i][y][0]][1] = true
    if (!s && i === 8)
      grid.value[x][y][0] = 'x'
  }
}

function buttonStyle(index, total) {
  if (index === 0)
    return {
      backgroundColor: '#b00',
      color: '#fff',
      fontSize: '20px',
      position: 'absolute',
    }
  const angleStep = (2 * Math.PI) / total
  const radius = 100
  const angle = index * angleStep
  const x = radius * Math.cos(angle)
  const y = radius * Math.sin(angle)
  return {
    margin: 0,
    padding: 0,
    position: 'absolute',
    transform: `translate(${x}px, ${y}px)`
  }
}

</script>

<template>
  <el-container>
    <el-aside width="30%">
      <span>数独游戏</span><br>
      <el-button type="primary" @click="init" plain>{{ state ? '重新' : '' }}开始</el-button>
      <br>
      <el-button type="primary" @click="state=!state" plain>{{ state ? '暂停' : '继续' }}</el-button>
      <br>
      <el-button type="primary" @click="reset" plain>重置</el-button>
      <br>
      <el-button type="primary" @click="flag=!flag" plain>{{ flag ? '关闭' : '开启' }}提示</el-button>
    </el-aside>
    <el-container>
      <el-header height="15%">
        <span>计时：{{ time }}</span>
      </el-header>
      <el-main>
        <table v-if="state">
          <tr v-for="x in 9">
            <td v-for="y in 9">
              <el-button v-bind:class="{isTrue:grid[x-1][y-1][0]!==0}" @click="judgment(x-1, y-1,false)">
                {{ grid[x - 1][y - 1][0] ? grid[x - 1][y - 1][0] : '' }}
              </el-button>
              <div class="inNum" v-if="grid[x-1][y-1][0]==='x'">
                <el-button :class="{isTrue:flag?num[1]:flag,inButton:true}" v-for="(num,index) in nums"
                           @click="grid[x-1][y-1][0] = num[0]"
                           :style="buttonStyle(index,nums.length-1)">
                  {{ num[0] === 0 ? 'x' : num[0] }}
                </el-button>
              </div>
            </td>
          </tr>
        </table>
      </el-main>
    </el-container>
  </el-container>
</template>


<style scoped>

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-aside span {
  font-size: 30px;
}

.el-aside button {
  width: 100%;
}


.el-header {
  display: flex;
  text-align: center;
  justify-content: center;
  background-color: #90ff66;
}

.el-header span {
  font-size: 50px;
}

.el-main {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #e9eef3;
}

.inNum {
  width: 270px;
  height: 270px;
  z-index: 999;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  position: absolute;
  transform: translate(-37%, -63%);
  background-color: #90ff66;
  opacity: 0.8;
}

.el-main .el-button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.el-main table{
  border: chartreuse 1px solid;
  background-color: #f8f8f8;
}
.isTrue {
  background-color: #7fcee6;
  pointer-events: none;
}
.el-container{
  width: 100%;
  height: 100%;
}
</style>